<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>react | web前端面试题集锦</title>
  <meta name="keywords" content=" react ">
  <meta name="description" content="react | web前端面试题集锦">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="categories">
<meta property="og:url" content="http://blog.duans.top/categories/index.html">
<meta property="og:site_name" content="web前端面试题集锦">
<meta property="og:locale" content="zh">
<meta property="article:published_time" content="2020-03-25T03:44:47.000Z">
<meta property="article:modified_time" content="2020-03-25T03:45:03.696Z">
<meta property="article:author" content="duans">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.0.1" rel="stylesheet">

<link href="/css/hl_theme/github.css?v=1.0.1" rel="stylesheet">

<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/jquery.autocomplete.min.js?v=1.0.1" ></script>

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>



<script src="/js/iconfont.js?v=1.0.1" ></script>

<meta name="generator" content="Hexo 4.2.0"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="true">
  <input class="theme_blog_path" value="">
</div>

<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/" class="avatar_target">
    <img class="avatar" src="/img/avatar.jpg" />
</a>
<div class="author">
    <span>duans</span>
</div>

<div class="icon">
    
        
        <a title="oschina" href="https://gitee.com/duans" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-oschina"></use>
                </svg>
            
        </a>
        
    
        
        <a title="jianshu" href="https://www.jianshu.com/u/6345254fa137" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-jianshu"></use>
                </svg>
            
        </a>
        
    
        
        <a title="github" href="https://github.com/duanshaobo" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            
        </a>
        
    
        
        <a title="email" href="mailto:duanshaobo@126.com" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-email"></use>
                </svg>
            
        </a>
        
    
</div>




<ul>
    <li><div class="all active">全部文章<small>(22)</small></div></li>
    
        
            
            <li><div data-rel="web前端"><i class="fold iconfont icon-right"></i>web前端<small>(16)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="前端面试题">前端面试题<small>(16)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="web服务器">web服务器<small>(2)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="数据库">数据库<small>(2)</small></div>
                
            </li>
            
        
    
        
            
            <li><div data-rel="web后端">web后端<small>(2)</small></div>
                
            </li>
            
        
    
        
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
    
    
    
    
    </div>
    <div></div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="22">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="back-title-list"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="https://www.duans.top/">duans</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <form onkeydown="if(event.keyCode === 13){return false;}">
        <input id="local-search-input" class="search" type="text" placeholder="Search..." />
        <i class="cross"></i>
        <span>
            <label for="tagswitch">Tags:</label>
            <input id="tagswitch" type="checkbox" style="display: none" />
            <i id="tagsWitchIcon"></i>
        </span>
    </form>
    <div class="tags-list">
    
    <li class="article-tag-list-item">
        <a class="color4">vue</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">前端基础</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">react</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">minapp</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">javascript</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">angular</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color3">mongodb</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">jquery</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">nginx</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">mysql</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">apache</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">webapi</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">性能优化</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">ajax</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">html5</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">css3</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es6</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es7</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color4">es8</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">代码分析</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">js基础</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">构建工具</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">混合app</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">混合开发</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">webSocket</a>
    </li>
    
    <div class="clearfix"></div>
</div>

    
    <nav id="title-list-nav">
        
        <a  class="web后端 "
           href="/2020/03/24/server/nodejs/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="nodejs">nodejs</span>
            <span class="post-date" title="2020-03-24 15:40:21">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/angular/"
           data-tag="angular"
           data-author="" >
            <span class="post-title" title="angular">angular</span>
            <span class="post-date" title="2020-03-24 11:56:09">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/javascript/"
           data-tag="javascript"
           data-author="" >
            <span class="post-title" title="javascript基础">javascript基础</span>
            <span class="post-date" title="2020-03-24 11:43:12">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/jquery/"
           data-tag="jquery"
           data-author="" >
            <span class="post-title" title="jquery">jquery</span>
            <span class="post-date" title="2020-03-24 11:44:09">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/minapp/"
           data-tag="minapp"
           data-author="" >
            <span class="post-title" title="微信小程序">微信小程序</span>
            <span class="post-date" title="2020-03-24 11:00:34">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/react/"
           data-tag="react"
           data-author="" >
            <span class="post-title" title="react">react</span>
            <span class="post-date" title="2020-03-24 10:58:53">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/vue/"
           data-tag="vue"
           data-author="" >
            <span class="post-title" title="vue">vue</span>
            <span class="post-date" title="2020-03-24 10:59:46">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/websocket/"
           data-tag="webSocket"
           data-author="" >
            <span class="post-title" title="webSocket">webSocket</span>
            <span class="post-date" title="2020-03-24 13:17:01">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/24/client/web-base/"
           data-tag="前端基础"
           data-author="" >
            <span class="post-title" title="web前端基础">web前端基础</span>
            <span class="post-date" title="2020-03-24 10:59:46">2020/03/24</span>
        </a>
        
        <a  class="web后端 "
           href="/2020/03/24/server/php/"
           data-tag=""
           data-author="" >
            <span class="post-title" title="php">php</span>
            <span class="post-date" title="2020-03-24 15:42:33">2020/03/24</span>
        </a>
        
        <a  class="web服务器 "
           href="/2020/03/24/server/nginx/"
           data-tag="nginx"
           data-author="" >
            <span class="post-title" title="nginx">nginx</span>
            <span class="post-date" title="2020-03-24 15:43:15">2020/03/24</span>
        </a>
        
        <a  class="web服务器 "
           href="/2020/03/24/server/apache/"
           data-tag="apache"
           data-author="" >
            <span class="post-title" title="apache">apache</span>
            <span class="post-date" title="2020-03-24 15:43:29">2020/03/24</span>
        </a>
        
        <a  class="数据库 "
           href="/2020/03/24/server/mysql/"
           data-tag="mysql"
           data-author="" >
            <span class="post-title" title="mysql">mysql</span>
            <span class="post-date" title="2020-03-24 15:46:19">2020/03/24</span>
        </a>
        
        <a  class="数据库 "
           href="/2020/03/24/server/mongodb/"
           data-tag="mongodb"
           data-author="" >
            <span class="post-title" title="mongodb">mongodb</span>
            <span class="post-date" title="2020-03-24 15:46:36">2020/03/24</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/webapi/"
           data-tag="webapi"
           data-author="" >
            <span class="post-title" title="webapi">webapi</span>
            <span class="post-date" title="2020-03-25 14:41:05">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/optimize/"
           data-tag="性能优化"
           data-author="" >
            <span class="post-title" title="前端性能优化">前端性能优化</span>
            <span class="post-date" title="2020-03-25 15:35:20">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/ajax/"
           data-tag="ajax"
           data-author="" >
            <span class="post-title" title="ajax数据交互">ajax数据交互</span>
            <span class="post-date" title="2020-03-25 15:40:58">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/h5c3/"
           data-tag="html5,css3"
           data-author="" >
            <span class="post-title" title="h5c3新特性">h5c3新特性</span>
            <span class="post-date" title="2020-03-25 15:50:04">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/es678/"
           data-tag="es6,es7,es8"
           data-author="" >
            <span class="post-title" title="ES6/7/8">ES6/7/8</span>
            <span class="post-date" title="2020-03-25 15:57:17">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/analysis/"
           data-tag="代码分析,js基础"
           data-author="" >
            <span class="post-title" title="js代码分析">js代码分析</span>
            <span class="post-date" title="2020-03-25 16:22:27">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/devtools/"
           data-tag="构建工具"
           data-author="" >
            <span class="post-title" title="前端构建工具">前端构建工具</span>
            <span class="post-date" title="2020-03-25 16:39:16">2020/03/25</span>
        </a>
        
        <a  class="web前端 前端面试题 "
           href="/2020/03/25/client/hybird/"
           data-tag="混合app,混合开发"
           data-author="" >
            <span class="post-title" title="混合开发">混合开发</span>
            <span class="post-date" title="2020-03-25 16:57:29">2020/03/25</span>
        </a>
        
    </nav>
</div>
    </div>
    <div class="hide-list">
        <div class="semicircle">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div class="post">
    <div class="pjax">
        <article id="post-client/react" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">react</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            
                <a  data-rel="web前端">web前端</a>/
            
                <a  data-rel="前端面试题">前端面试题</a>
            
        </span>
        
        
        <span class="tag">
            
            <a class="color1">react</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
        创建时间:<time class="date" title='更新时间: 2020-03-27 14:33:22'>2020-03-24 10:58</time>
        
    </div>
    <div class="article-meta">
        
        
        <span id="busuanzi_container_page_pv">
            阅读:<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
        <span class="top-comment" title="跳转至评论区">
            <a href="#comments">
                评论:<span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </a>
        </span>
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是虚拟DOM-使用虚拟DOM有什么优势"><span class="toc-text">什么是虚拟DOM, 使用虚拟DOM有什么优势?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#简单介绍下react中的diff算法"><span class="toc-text">简单介绍下react中的diff算法?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是Redux"><span class="toc-text">什么是Redux?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React有哪些常用的组件库"><span class="toc-text">React有哪些常用的组件库?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React中如何操作DOM"><span class="toc-text">React中如何操作DOM?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是高阶组件-HOC"><span class="toc-text">什么是高阶组件(HOC)?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React中调用setState后发生了什么"><span class="toc-text">React中调用setState后发生了什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React中状态state和属性props有什么不同"><span class="toc-text">React中状态state和属性props有什么不同?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React中有几种创建组件的方式"><span class="toc-text">React中有几种创建组件的方式?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React中的组件按照职责不同-可以分为几种类型"><span class="toc-text">React中的组件按照职责不同, 可以分为几种类型?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#类组件-Class-component-和函数式组件-Functional-component-之间有何不同"><span class="toc-text">类组件(Class component)和函数式组件(Functional component)之间有何不同?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#说说react的生命周期函数"><span class="toc-text">说说react的生命周期函数?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#react-性能优化可以使用哪个生命周期函数？"><span class="toc-text">react 性能优化可以使用哪个生命周期函数？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#应该在-React-组件的何处发起-Ajax-请求"><span class="toc-text">应该在 React 组件的何处发起 Ajax 请求?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React如何实现服务端渲染"><span class="toc-text">React如何实现服务端渲染?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#自定义的react组件首字母为什必须要大写"><span class="toc-text">自定义的react组件首字母为什必须要大写?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#setState-什么时候是同步-什么时候是异步"><span class="toc-text">setState 什么时候是同步, 什么时候是异步?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React-事件机制跟原生事件有什么区别"><span class="toc-text">React 事件机制跟原生事件有什么区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#React-事件中为什么要绑定-this-或者要用箭头函数"><span class="toc-text">React 事件中为什么要绑定 this 或者要用箭头函数?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#谈谈react中的事件机制"><span class="toc-text">谈谈react中的事件机制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#谈谈-jsx-的原理"><span class="toc-text">谈谈 jsx 的原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Jsx在书写的时候和html有什么不同"><span class="toc-text">Jsx在书写的时候和html有什么不同?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#在jsx中如果非要创建多个平行标签-该如何处理"><span class="toc-text">在jsx中如果非要创建多个平行标签, 该如何处理?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#react中如何实现路由懒加载"><span class="toc-text">react中如何实现路由懒加载?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#如何在使用function创建的组件中使用状态数据"><span class="toc-text">如何在使用function创建的组件中使用状态数据?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#react中useEffect-方法的作用是什么"><span class="toc-text">react中useEffect()方法的作用是什么?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#react中如何实现子组件向父组件传递数据"><span class="toc-text">react中如何实现子组件向父组件传递数据?</span></a></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="什么是虚拟DOM-使用虚拟DOM有什么优势"><a href="#什么是虚拟DOM-使用虚拟DOM有什么优势" class="headerlink" title="什么是虚拟DOM, 使用虚拟DOM有什么优势?"></a>什么是虚拟DOM, 使用虚拟DOM有什么优势?</h2><p>虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。<br>用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中, 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。</p>
<h2 id="简单介绍下react中的diff算法"><a href="#简单介绍下react中的diff算法" class="headerlink" title="简单介绍下react中的diff算法?"></a>简单介绍下react中的diff算法?</h2><p>把树形结构按照层级分解，只比较同级元素。<br>给列表结构的每个单元添加唯一的 key 属性，方便比较。<br><code>React</code> 只会匹配相同 <code>class</code> 的 <code>component</code>（这里面的 <code>class</code> 指的是组件的名字）<br>合并操作，调用 <code>component</code> 的 <code>setState</code> 方法的时候, <code>React</code> 将其标记为 <code>dirty</code>. 到每一个事件循环结束, React 检查所有标记 dirty 的 <code>component</code> 重新绘制.<br>选择性子树渲染。开发人员可以重写 <code>shouldComponentUpdate</code> 提高 diff 的性能。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">updateChildren</span>(<span class="hljs-params">vnode, newVnode</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> children = vnode.children || [];<br>    <span class="hljs-keyword">var</span> newChildren = newVnode.children || [];<br>    children.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">childrenVnode, index</span>) </span>&#123;<br>        <span class="hljs-keyword">var</span> newChildVnode = newChildren[index]<br>        <span class="hljs-keyword">if</span> (childrenVnode.tag === newChildVnode.tag) &#123;<br>            updateChilren(childrenVnode, newChildVnode)<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            repleaceNode(childrenVnode, newChildVnode)<br>        &#125;<br>    &#125;)<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">repleaceNode</span>(<span class="hljs-params">vnode, newVnode</span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> elem = vnode.elem<br>    <span class="hljs-keyword">var</span> newEle = createElement(newVnode)<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="什么是Redux"><a href="#什么是Redux" class="headerlink" title="什么是Redux?"></a>什么是Redux?</h2><p>Redux是一个状态管理工具, 不仅可以在react中使用, 也可在其他框架中使用, 甚至可以脱离框架本身使用.redux中有几个核心的组成部分:<br>store存储数据的对象, 必须通过createStore方法来创建;<br>action更新数据的规则, 必须有一个属性state, 值必须是字符串;<br>reducer更新数据的函数, 需要传入state状态数据和action更新规则.<br>在react中使用redux的时候, 一般会使用react-redux来简化使用步骤.</p>
<h2 id="React有哪些常用的组件库"><a href="#React有哪些常用的组件库" class="headerlink" title="React有哪些常用的组件库?"></a>React有哪些常用的组件库?</h2><p>PC端组件库:<br>element-ui(饿了么推出的前端组件库), ant-design(蚂蚁金服前端组件库, 几乎覆盖了三大框架); zent(有赞推出的PC端组件库)</p>
<h2 id="React中如何操作DOM"><a href="#React中如何操作DOM" class="headerlink" title="React中如何操作DOM?"></a>React中如何操作DOM?</h2><p>在需要进行dom操作的标签上设置一个ref属性, 保证值不要重复, 后期在js部分可以通过<code>this.refs. 属性名</code>来获取标签的虚拟dom对象.</p>
<h2 id="什么是高阶组件-HOC"><a href="#什么是高阶组件-HOC" class="headerlink" title="什么是高阶组件(HOC)?"></a>什么是高阶组件(HOC)?</h2><p>函数的返回值是一个函数, 我们称之为高阶函数. 同理一个组件返回值如果还是一个组件, 那么就称之为高阶组件.redux中提供的connect就是一个高阶组件.</p>
<h2 id="React中调用setState后发生了什么"><a href="#React中调用setState后发生了什么" class="headerlink" title="React中调用setState后发生了什么?"></a>React中调用setState后发生了什么?</h2><p>在代码中调用 <code>setState</code> 函数之后，<code>React</code> 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（<code>Reconciliation</code>）。经过调和过程，<code>React</code> 会以相对高效的方式根据新的状态构建 <code>React</code> 元素树并且着手重新渲染整个 UI 界面。在 <code>React</code> 得到元素树之后，<code>React</code> 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，<code>React</code> 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。</p>
<h2 id="React中状态state和属性props有什么不同"><a href="#React中状态state和属性props有什么不同" class="headerlink" title="React中状态state和属性props有什么不同?"></a>React中状态state和属性props有什么不同?</h2><p><code>state</code>是组件的私有数据, 可读可写, <code>props</code>是只读属性, 一般来自外部(比如父组件)</p>
<h2 id="React中有几种创建组件的方式"><a href="#React中有几种创建组件的方式" class="headerlink" title="React中有几种创建组件的方式?"></a>React中有几种创建组件的方式?</h2><p>通过函数的方式创建组件, 此种方式创建的组件为无状态组件(不常用);<br><code>React.createClass();</code><br>通过class类的方式创建组件(须继承<code>React. Component</code>), 实际开发中使用此种方式.</p>
<h2 id="React中的组件按照职责不同-可以分为几种类型"><a href="#React中的组件按照职责不同-可以分为几种类型" class="headerlink" title="React中的组件按照职责不同, 可以分为几种类型?"></a>React中的组件按照职责不同, 可以分为几种类型?</h2><p>根据组件的职责通常把组件分为 UI 组件和容器组件;<br>UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑;<br>两者通过 <code>React-Redux</code>提供 <code>connect</code> 方法联系起来.</p>
<h2 id="类组件-Class-component-和函数式组件-Functional-component-之间有何不同"><a href="#类组件-Class-component-和函数式组件-Functional-component-之间有何不同" class="headerlink" title="类组件(Class component)和函数式组件(Functional component)之间有何不同?"></a>类组件(Class component)和函数式组件(Functional component)之间有何不同?</h2><p>类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 <code>store</code> 并维持状态; 当组件仅是接收 <code>props</code>，并将组件自身渲染到页面时，该组件就是一个 ‘无状态组件(<code>stateless component</code>)’，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(<code>dumb components</code>)或展示组件.</p>
<h2 id="说说react的生命周期函数"><a href="#说说react的生命周期函数" class="headerlink" title="说说react的生命周期函数?"></a>说说react的生命周期函数?</h2><p>初始化阶段：<br><code>getDefaultProps</code>: 获取实例的默认属性<br><code>getInitialState</code>: 获取每个实例的初始化状态<br><code>componentWillMount</code>: 组件即将被装载、渲染到页面上<br><code>render</code>: 组件在这里生成虚拟的 DOM 节点<br><code>componentDidMount</code>: 组件真正在被装载之后<br>运行中状态：<br><code>componentWillReceiveProps</code>: 组件将要接收到属性的时候调用<br><code>shouldComponentUpdate</code>: 组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）<br><code>componentWillUpdate</code>: 组件即将更新不能修改属性和状态<br><code>render</code>: 组件重新描绘<br><code>componentDidUpdate</code>: 组件已经更新<br>销毁阶段：<br><code>componentWillUnmount</code>: 组件即将销毁</p>
<h2 id="react-性能优化可以使用哪个生命周期函数？"><a href="#react-性能优化可以使用哪个生命周期函数？" class="headerlink" title="react 性能优化可以使用哪个生命周期函数？"></a>react 性能优化可以使用哪个生命周期函数？</h2><p><code>shouldComponentUpdate</code> 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 <code>shouldComponentUpdate</code> 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。</p>
<h2 id="应该在-React-组件的何处发起-Ajax-请求"><a href="#应该在-React-组件的何处发起-Ajax-请求" class="headerlink" title="应该在 React 组件的何处发起 Ajax 请求?"></a>应该在 React 组件的何处发起 Ajax 请求?</h2><p>在 React 组件中，应该在 <code>componentDidMount</code> 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 <code>setState</code>，这将不起作用。在 <code>componentDidMount</code> 中发起网络请求将保证这有一个组件可以更新了。</p>
<h2 id="React如何实现服务端渲染"><a href="#React如何实现服务端渲染" class="headerlink" title="React如何实现服务端渲染?"></a>React如何实现服务端渲染?</h2><p>Next.js 是一个轻量级的 React 服务端渲染应用框架.</p>
<h2 id="自定义的react组件首字母为什必须要大写"><a href="#自定义的react组件首字母为什必须要大写" class="headerlink" title="自定义的react组件首字母为什必须要大写?"></a>自定义的react组件首字母为什必须要大写?</h2><p>Babel在对jsx代码进行编译的时候, 如果首字母大写, 就把其当做react组件编译, 编译成js对象; 如果首字母小写, 则认为是一个普通的html标签, 会解析成普通字符串.</p>
<h2 id="setState-什么时候是同步-什么时候是异步"><a href="#setState-什么时候是同步-什么时候是异步" class="headerlink" title="setState 什么时候是同步, 什么时候是异步?"></a>setState 什么时候是同步, 什么时候是异步?</h2><p>这里的“异步”不是说异步代码实现. 而是说 react 会先收集变更, 然后再进行统一的更新.<code>setState</code> 在原生事件和 <code>setTimeout</code> 中都是同步的. 在合成事件和钩子函数中是异步的. 在 <code>setState</code> 中, 会根据一个 <code>isBatchingUpdates</code> 判断是直接更新还是稍后更新, 它的默认值是 false. 但是 React 在调用事件处理函数之前会先调用 <code>batchedUpdates</code> 这个函数, <code>batchedUpdates</code> 函数 会将 <code>isBatchingUpdates</code> 设置为 true. 因此, 由 react 控制的事件处理过程, 就变成了异步(批量更新).</p>
<h2 id="React-事件机制跟原生事件有什么区别"><a href="#React-事件机制跟原生事件有什么区别" class="headerlink" title="React 事件机制跟原生事件有什么区别?"></a>React 事件机制跟原生事件有什么区别?</h2><p><code>React</code> 的事件使用驼峰命名, 跟原生的全部小写做区分. 不能通过 <code>return false</code> 来阻止默认行为, 必须明确调用 <code>preventDefault</code> 去阻止浏览器的默认响应.</p>
<h2 id="React-事件中为什么要绑定-this-或者要用箭头函数"><a href="#React-事件中为什么要绑定-this-或者要用箭头函数" class="headerlink" title="React 事件中为什么要绑定 this 或者要用箭头函数?"></a>React 事件中为什么要绑定 this 或者要用箭头函数?</h2><p>事实上, 这并不算是 react 的问题, 而是 this 的问题. 但是也是 react 中经常出现的问题. 因此也讲一下 <code>&lt;button type=&quot;button&quot; onClick={this.handleClick}&gt;Click Me&lt;/button&gt;</code> 这里的this是当事件被触发时进行绑定的.this的值会回退到默认绑定，即值为 undefined，这是因为类声明和原型方法是以严格模式运行。我们可以使用 bind 绑定到组件实例上. 而不用担心它的上下文. 因为箭头函数中的 this 指向的是定义时的 this，而不是执行时的 this. 所以箭头函数同样也可以解决.</p>
<h2 id="谈谈react中的事件机制"><a href="#谈谈react中的事件机制" class="headerlink" title="谈谈react中的事件机制"></a>谈谈react中的事件机制</h2><p>在组件挂载的阶段, 根据组件生命的 <code>react</code> 事件, 给 <code>document</code> 添加事件 <code>addEventListener</code>, 并添加统一的事件处理函数 <code>dispatchEvent</code>.<br>将所有的事件和事件类型以及 react 组件进行关联, 将这个关系保存在一个 map 里. 当事件触发的时候, 首先生成合成事件, 根据组件 id 和事件类型找到对应的事件函数, 模拟捕获流程, 然后依次触发对应的函数.</p>
<h2 id="谈谈-jsx-的原理"><a href="#谈谈-jsx-的原理" class="headerlink" title="谈谈 jsx 的原理"></a>谈谈 jsx 的原理</h2><p><code>&lt;div&gt;Hello ConardLi&lt;/div&gt;</code><br>实际上, babel 帮我们将这个语法转换成<br><code>React.createElement(&#39;div&#39;, null, &#39;Hello ConardLi&#39;)</code> </p>
<h2 id="Jsx在书写的时候和html有什么不同"><a href="#Jsx在书写的时候和html有什么不同" class="headerlink" title="Jsx在书写的时候和html有什么不同?"></a>Jsx在书写的时候和html有什么不同?</h2><p>必须有一个根标签在最外层包裹(因为这里的标签需要babel编译, 编译成 <code>React.createElement(&#39;标签名&#39;,&#39;属性对象&#39;, &#39;内容&#39;) )</code><br>双标签和单标签( <code>&lt;br/&gt;,&lt;hr/&gt;</code> )都必须闭合, 否则无法通过编译</p>
<h2 id="在jsx中如果非要创建多个平行标签-该如何处理"><a href="#在jsx中如果非要创建多个平行标签-该如何处理" class="headerlink" title="在jsx中如果非要创建多个平行标签, 该如何处理?"></a>在jsx中如果非要创建多个平行标签, 该如何处理?</h2><p>在jsx的最外层使用<code>&lt;&gt;&lt;/&gt;</code>进行包裹;<br>或者使用 <code>&lt;React.Fragment&gt;&lt;/React.Fragment&gt;</code> 标签进行包裹;<br>两种方式本质是一样的, 底层都是通过<br><code>document.createDocumentFragment()</code> 创建了一个虚拟dom标签.</p>
<h2 id="react中如何实现路由懒加载"><a href="#react中如何实现路由懒加载" class="headerlink" title="react中如何实现路由懒加载?"></a>react中如何实现路由懒加载?</h2><p>react中提供了一个lazy方法, 可以实现组件懒加载, 具体用法如下:</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs jsx"><span class="hljs-comment">/* lazy是实现组件懒加载的方法 */</span><br><span class="hljs-comment">/* Suspense是一个组件, 改组件的作用是当异步加载的组件还没有被加载出来的时候, 在页面上展示一个loading的效果 */</span><br><span class="hljs-keyword">import</span> &#123;lazy,Suspense&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;<br><span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;<br><span class="hljs-keyword">import</span> &#123;HashRouter <span class="hljs-keyword">as</span> Router,Route,Switch&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;<br><span class="hljs-comment">/* 组件路径按照实际相对路径加载即可 */</span><br><span class="hljs-keyword">const</span> Home=lazy(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span><span class="hljs-keyword">import</span>(<span class="hljs-string">'./components/home.jsx'</span>));<br>ReactDom.render(<br> &lt;Router&gt;<br>    &lt;Switch&gt;<br>        &lt;Suspense fallback=&#123;&lt;h1&gt;loading...&lt;<span class="hljs-regexp">/h1&gt;&#125;&gt;</span><br><span class="hljs-regexp">            &lt;Route path="/</span>home<span class="hljs-string">" compoent=&#123;Home&#125;&gt;</span><br><span class="hljs-string">        &lt;/Suspense&gt;</span><br><span class="hljs-string">    &lt;/Switch&gt;</span><br><span class="hljs-string">&lt;/Router&gt;,</span><br><span class="hljs-string">document.querySelector('#root'));</span><br></code></pre></td></tr></table></figure>
<h2 id="如何在使用function创建的组件中使用状态数据"><a href="#如何在使用function创建的组件中使用状态数据" class="headerlink" title="如何在使用function创建的组件中使用状态数据?"></a>如何在使用function创建的组件中使用状态数据?</h2><p>使用react提供的一个state hook(特性是16.8版本之后新增的特性); 用法如下</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> React, &#123; useState &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Example</span>(<span class="hljs-params"></span>) </span>&#123;<br>  <span class="hljs-comment">/* 使用useState方法声明一个叫 "count"的state变量count=0 */</span><br>  <span class="hljs-comment">/* steCount(方法名可自定义)方法是专门更新count的方法, 相当于class组件中的setState方法的功能 */</span> <br>  <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);<br>  <span class="hljs-keyword">const</span> [age, setAge] = useState(<span class="hljs-number">30</span>);<br>  <span class="hljs-keyword">const</span> [todos, setTodos] = useState([&#123; <span class="hljs-attr">text</span>: <span class="hljs-string">'学习 Hook'</span> &#125;]);<br>  <span class="hljs-comment">/*</span><br><span class="hljs-comment">        以上代码等同于class组件中的如下代码</span><br><span class="hljs-comment">        state=&#123;</span><br><span class="hljs-comment">            count:0</span><br><span class="hljs-comment">        &#125;</span><br><span class="hljs-comment">  */</span><br>  <span class="hljs-keyword">return</span> (<br>    &lt;div&gt;<br>      &lt;p&gt;You clicked &#123;count&#125; times&lt;<span class="hljs-regexp">/p&gt;</span><br><span class="hljs-regexp">      &lt;button onClick=&#123;() =&gt; setCount(count + 1)&#125;&gt;</span><br><span class="hljs-regexp">        +1</span><br><span class="hljs-regexp">      &lt;/</span>button&gt;<br>    &lt;<span class="hljs-regexp">/div&gt;</span><br><span class="hljs-regexp">  );</span><br><span class="hljs-regexp">&#125;</span><br></code></pre></td></tr></table></figure>

<h2 id="react中useEffect-方法的作用是什么"><a href="#react中useEffect-方法的作用是什么" class="headerlink" title="react中useEffect()方法的作用是什么?"></a>react中useEffect()方法的作用是什么?</h2><p>useEffect的作用就是在function声明的组件中,在特定时间点, 执行一个指定的任务, 类似于class类组件中的声明周期钩子函数.你可以把 useEffect Hook 看做 <code>componentDidMount</code>，<code>componentDidUpdate</code> 和 <code>componentWillUnmount</code> 这三个函数的组合.<br>用法如下:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">import</span> React, &#123; useState, useEffect &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Example</span>(<span class="hljs-params"></span>) </span>&#123;<br>  <span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);<br>  <span class="hljs-comment">/* useEffect可以监听state状态数据的更新*/</span><br>  useEffect(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &#123;<br>    <span class="hljs-comment">/* 当用户点击次数设置为网页的title */</span><br>    <span class="hljs-built_in">document</span>.title = <span class="hljs-string">`You clicked <span class="hljs-subst">$&#123;count&#125;</span> times`</span>;<br>  &#125;);<br><br>  <span class="hljs-keyword">return</span> (<br>    &lt;div&gt;<br>      &lt;p&gt;You clicked &#123;count&#125; times&lt;<span class="hljs-regexp">/p&gt;</span><br><span class="hljs-regexp">      &lt;button onClick=&#123;() =&gt; setCount(count + 1)&#125;&gt;</span><br><span class="hljs-regexp">        Click me</span><br><span class="hljs-regexp">      &lt;/</span>button&gt;<br>    &lt;<span class="hljs-regexp">/div&gt;</span><br><span class="hljs-regexp">  );</span><br><span class="hljs-regexp">&#125;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">/* 仅在 count 更改时更新 */</span><br>useEffect(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &#123;<br>  <span class="hljs-built_in">document</span>.title = <span class="hljs-string">`You clicked <span class="hljs-subst">$&#123;count&#125;</span> times`</span>;<br>&#125;, [count]);  <br><br><span class="hljs-string">``</span><span class="hljs-string">` </span><br><span class="hljs-string"></span><br><span class="hljs-string"></span><br><span class="hljs-string">## react中如何实现父组件向子组件传递数据?</span><br><span class="hljs-string"></span><br><span class="hljs-string">react中父组件向子组件传递数据可通过props属性进行传递, 具体做法如下:</span><br><span class="hljs-string">`</span><span class="hljs-string">``</span>js<br><span class="hljs-comment">/* 父组件 */</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Parent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br><br>  state=&#123;<br>    msg:<span class="hljs-string">'I am the data will send to Son component'</span><br>  &#125;<br><br>  render()&#123;<br>    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>父组件<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">Son</span> <span class="hljs-attr">msg</span>=<span class="hljs-string">&#123;this.state.msg&#125;/</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>  &#125;<br>&#125;<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Son</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br>  <br>  render()&#123;<br>    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>子组件<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>/&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;this.props.msg&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>  &#125;<br>&#125;<br></code></pre></td></tr></table></figure>


<h2 id="react中如何实现子组件向父组件传递数据"><a href="#react中如何实现子组件向父组件传递数据" class="headerlink" title="react中如何实现子组件向父组件传递数据?"></a>react中如何实现子组件向父组件传递数据?</h2><p>react中实现子组件向父组件传递数据,是通过props属性来实现, 父组通过props属性向子组件传递一个方法,子组件在接收到之后, 调用该方法, 并把需要传递给父组件的数据通过实参传入即可</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">/* 父组件 */</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Parent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br><br>  getData(data)&#123;<br>    <span class="hljs-keyword">this</span>.setState(&#123;<br>      msg:data<br>    &#125;);<br>  &#125;<br><br>  render()&#123;<br>    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>父组件<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">Son</span> <span class="hljs-attr">fn</span>=<span class="hljs-string">&#123;this.getData&#125;/</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>/&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;this.state.msg&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>  &#125;<br>&#125;<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Son</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>&#123;<br>  state=&#123;<br>    msg:<span class="hljs-string">'I am the data will send to Parant component'</span><br>  &#125;<br><br>  componentWillMount()&#123;<br>    <span class="hljs-keyword">this</span>.props.fn(<span class="hljs-keyword">this</span>.state.msg);<br>  &#125;<br><br>  render()&#123;<br>    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>子组件<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span><br><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>  &#125;<br>&#125;<br></code></pre></td></tr></table></figure>











      
       <hr><span style="font-style: italic;color: gray;"> 请你也把我遗弃在远方, 让我享受这可怕的绝望, 当你终于感到了悲伤, 我在回来为你歌唱 </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>




    <div id="comments"></div>
<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">

<script src="/js/gitment.js"></script>

<script>
    var gitment = new Gitment({
        id: 'http://blog.duans.top/2020/03/24/client/react/', // 可选。默认为 location.href
        owner: 'duanshaobo',
        repo: 'blog.duans.top',
        oauth: {
            client_id: '76fd9510b156417889ed',
            client_secret: 'c63458b7f62b1b672250331443a554f3e8be05b3',
        },
    })
    gitment.render('comments')
</script>




    




    </div>
    <div class="copyright">
        <p class="footer-entry">Copyright©2020 www.duans.top</p>
<!-- <p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p> -->

    </div>
    <div class="full-toc">
        <button class="full"><span class="min "></span></button>
<button class="post-toc-menu"><span class="post-toc-menu-icons"></span></button>
<div class="post-toc"><span class="post-toc-title">目录</span>
    <div class="post-toc-content">

    </div>
</div>
<a class="" id="rocket" ></a>

    </div>
</div>
<div class="acParent"></div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.0.1" ></script>

<script src="/js/script.js?v=1.0.1" ></script>
<script>
    var img_resize = 'default';
    /*作者、标签的自动补全*/
    $(function () {
        $('.search').AutoComplete({
            'data': ['@duans','@duans','#vue','#前端基础','#react','#minapp','#javascript','#angular','#mongodb','#jquery','#nginx','#mysql','#apache','#webapi','#性能优化','#ajax','#html5','#css3','#es6','#es7','#es8','#代码分析','#js基础','#构建工具','#混合app','#混合开发','#webSocket',],
            'itemHeight': 20,
            'width': 418
        }).AutoComplete('show');
    })
    function initArticle() {
        /*渲染对应的表格样式*/
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 582px;
    }
    .nav.fullscreen {
        margin-left: -582px;
    }
    .nav-left {
        width: 160px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 532px;
        }
        .nav.fullscreen {
            margin-left: -532px;
        }
        .nav-left {
            width: 140px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 532px;
            margin-left: -532px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
        .nav .hide-list.fullscreen {
            left: 532px
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    
    .post .pjax article .article-entry>ol, .post .pjax article .article-entry>ul, .post .pjax article>ol, .post .pjax article>ul{
        border: #e2dede solid 1px;
        border-radius: 10px;
        padding: 10px 32px 10px 56px;
    }
    .post .pjax article .article-entry li>ol, .post .pjax article .article-entry li>ul,.post .pjax article li>ol, .post .pjax article li>ul{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .post .pjax article .article-entry>ol>li, .post .pjax article .article-entry>ul>li,.post .pjax article>ol>li, .post .pjax article>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    .post .pjax article .article-entry li>ol>li, .post .pjax article .article-entry li>ul>li,.post .pjax article li>ol>li, .post .pjax article li>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    
    .nav-right:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        background: url("/img/article-list-background-1.jpg");
        background-repeat: no-repeat;
        background-position: 50% 0;
        -ms-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }
    

    
    .post .pjax article :not(pre) > code {
        color: #24292e;
        font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
        background-color: rgba(27,31,35,.05);
        border-radius: 3px;
        font-size: 85%;
        margin: 0;
        padding: .2em .4em;
    }
    
</style>







</html>
